<template>
	<div class="vip">
		<div class="vip">
			<div class="hd">
				<div class="back" @click="backHome()">返回主页</div>
				会员中心
				<div class="his" @click="login()">{{!is_login?'登录注册':'退出登录'}}</div>
			</div>
			<div class="person">
				<div class="el-row is-justify-center" style="margin-left: -10px; margin-right: -10px;">
					<div class="el-col el-col-24 el-col-xs-18 el-col-sm-624 el-col-md-12 el-col-lg-12 el-col-xl-12 is-guttered"
						style="padding-right: 10px; padding-left: 10px;">
						<div class="title">
							<div class="txt">
								<span class="t1">会员</span>
								<span class="t2">信息</span>
							</div>
							<img class="pic"
								src="" />
						</div>
						<div class="btn info">
							<i class="top"></i>
							<i class="bottom"></i>
							<div class="txt">
								<div class="label">会员账号：</div>
								<div class="val">{{centerData.username}}</div>
							</div>
							<div class="txt">
								<div class="label">注册日期：</div>
								<div class="val">{{centerData.create_time}}</div>
							</div>
							<!-- <div class="txt">
								<div class="label">当前IP：</div>
								<div class="val">{{centerData.register_ip}}</div>
							</div> -->
						</div>
					</div>
					<div class="el-col el-col-24 el-col-xs-18 el-col-sm-624 el-col-md-12 el-col-lg-12 el-col-xl-12 is-guttered"
						style="padding-right: 10px; padding-left: 10px;" @click="dialogTableVisible = true">
						<div class="title">
							<div class="txt">
								<span class="t1">历史</span>
								<span class="t2">订单</span>
							</div>
							<img class="pic"
								src="" />
						</div>
						<div class="btn info">
							<i class="top"></i>
							<i class="bottom"></i>
							<div class="pic2">
								<img
									src="" />
							</div>
						</div>
					</div>
					<div class="el-col el-col-24 el-col-xs-18 el-col-sm-624 el-col-md-12 el-col-lg-12 el-col-xl-12 is-guttered"
						style="padding-right: 10px; padding-left: 10px;" @click="open()">
						<div class="title">
							<div class="txt">
								<span class="t1">代理</span>
								<span class="t2">中心</span>
							</div>
							<img class="pic"
								src="" />
						</div>
						<div class="btn info">
							<i class="top"></i>
							<i class="bottom"></i>
							<div class="pic2"><img
									src="" />
							</div>
						</div>
					</div>
					<div class="el-col el-col-24 el-col-xs-18 el-col-sm-624 el-col-md-12 el-col-lg-12 el-col-xl-12 is-guttered"
						style="padding-right: 10px; padding-left: 10px;" @click="kefu()">
						<div class="title">
							<div class="txt">
								<span class="t1">联系</span>
								<span class="t2">我们</span>
							</div>
							<img class="pic"
								src="" />
						</div>
						<div class="btn info">
							<i class="top"></i>
							<i class="bottom"></i>
							<div class="pic2"><img
									src="" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<el-dialog title="历史订单" :visible.sync="dialogTableVisible">
				<div style="max-height:400px;" class="scrollbar">
					<el-scrollbar style="height:100%;width:100%;" ref="scrollMenuRef" class="scrollMenuBox">
						<div class="table">
							<div class="table-hd">
								<div class="t-hd-th">时间</div>
								<div class="t-hd-th">订单编号</div>
								<div class="t-hd-th">支付金额</div>
								<div class="t-hd-th">支付状态</div>
								<div class="t-hd-th">审核状态</div>
								<div class="t-hd-th">操作</div>
							</div>
							<div class="table-con" v-for="(item, index) in orderlist" :key="index">
								<div class="t-hd-td">{{item.created_at}}</div>
								<div class="t-hd-td">{{item.order_num}}</div>
								<div class="t-hd-td">{{item.actual_amount}}</div>
								<div class="t-hd-td" v-if="item.status==1">未支付</div>
								<div class="t-hd-td" v-if="item.status==2">已支付</div>
								<div class="t-hd-td" v-if="item.status==3">已过期</div>
								<div class="t-hd-td" v-if="item.is_audit==0&&item.status==1"></div>
								<div class="t-hd-td" v-if="item.is_audit==0&&item.status==3"></div>
								<div class="t-hd-td" v-if="item.is_audit==0&&item.status==2">等待下发</div>
								<div class="t-hd-td" v-if="item.is_audit==1&&item.status==2">下发成功</div>
								<div class="t-hd-td" v-if="item.is_audit==2&&item.status==2">下发失败</div>
								<div class="t-hd-td blueColor" @click="ck_dialogFormVisible(item.id)">
									查看
								</div>
							</div>
						</div>
					</el-scrollbar>
					<div class="linepage">
						<div class="p1" @click="p1()" v-loading.fullscreen.lock="fullscreenLoading" v-if="page!=1">上一页
						</div>
						<div class="p2" @click="p2()" v-loading.fullscreen.lock="fullscreenLoading"
							v-if="total_page==1">下一页</div>
					</div>
				</div>
			</el-dialog>
			<el-dialog id="eldlog" title="订单详情" :visible.sync="dialogFormVisible">
				<div class="scrollbars">
					<el-descriptions direction="vertical" :column="1" border>
						<el-descriptions-item label="订单编号"
							style="color: #333;">{{odetail.order_num}}</el-descriptions-item>
						<el-descriptions-item label="支付金额">{{odetail.actual_amount}}</el-descriptions-item>
						<el-descriptions-item label="应下发金额">{{odetail.rec_amount}}</el-descriptions-item>
						<el-descriptions-item label="下发地址">{{odetail.receive_address}}</el-descriptions-item>
						<el-descriptions-item label="支付状态" v-if="odetail.status==1">未支付</el-descriptions-item>
						<el-descriptions-item label="支付状态" v-if="odetail.status==2">已支付</el-descriptions-item>
						<el-descriptions-item label="支付状态" v-if="odetail.status==3">已过期</el-descriptions-item>
						<el-descriptions-item label="审核状态"
							v-if="odetail.is_audit==0&&odetail.status==1"></el-descriptions-item>
						<el-descriptions-item label="审核状态"
							v-if="odetail.is_audit==0&&odetail.status==3"></el-descriptions-item>
						<el-descriptions-item label="审核状态"
							v-if="odetail.is_audit==0&&odetail.status==2">等待下发</el-descriptions-item>
						<el-descriptions-item label="审核状态"
							v-if="odetail.is_audit==1 &&odetail.status==2">下发成功</el-descriptions-item>
						<el-descriptions-item label="审核状态"
							v-if="odetail.is_audit==2 &&odetail.status==2">下发失败</el-descriptions-item>
						<el-descriptions-item label="转账hash">{{odetail.transaction_hash}}</el-descriptions-item>
						<el-descriptions-item label="备注">{{odetail.content}}</el-descriptions-item>
					</el-descriptions>
					<div class="lines"></div>
					<el-row type="flex" class="row-bg" justify="end">
						<el-button @click="ck_none()">取消</el-button>
						<el-button @click="ck_none()" type="primary">确认</el-button>
					</el-row>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import translate from 'i18n-jsautotranslate'
	export default {
		name: 'vip',
		data() {
			return {
				page: 1,
				centerData: '',
				is_login: '',
				orderlist: '',
				odetail: '',
				dialogFormVisible: false,
				dialogTableVisible: false,
				total_page: '',
				getSetData: '',
			};
		},
		created() {
			let that = this;
			that.API_getSet();
			var user_id = localStorage.getItem("user_id");
			if (user_id != void 0) {
				console.log('登录了', user_id)
				that.is_login = true;
				that.user_id = user_id;
				that.API_center();
				that.API_orderlist();
			} else {
				console.log('未登录', user_id)
				that.is_login = false;
			}

		},
		mounted() {
			translate.setUseVersion2(); //设置使用v2.x 版本
			translate.language.setLocal();
			translate.execute(); //进行翻译
		},
		methods: {
			backHome() {
				this.$router.push('/');
			},
			async API_getSet() {
				await this.$api.fengXing.getSet({}).then((res) => {
					if (res.code == 0) {
						this.getSetData = res.data;
					}
				});
			},
			open() {
				this.$alert('仅针对代理开放,请您加入代理后再尝试点击进入 ', '成为代理', {
					confirmButtonText: '确定',
					callback: action => {}
				});
			},
			kefu() {
				this.$alert('<p class="tgkf">邮箱: ' + this.getSetData.email + '</p><p class="tgkf">客服: ' + this.getSetData
					.tg_kefu + '</p><p class="tgkf"><a target="_blank" href="https://t.me/Taida58">在线客服</a></p>',
					'联系我们', {
						dangerouslyUseHTMLString: true
					});
			},
			ck_dialogFormVisible(id) {
				let that = this;
				that.$api.fengXing.orderDetail({
					user_id: that.user_id,
					order_id: id,
				}).then((res) => {
					if (res.code == 0) {
						that.odetail = res.data;
						that.dialogFormVisible = true;
					} else {
						this.$message(res.msg);
					}
				});
			},
			ck_none() {
				this.dialogFormVisible = false;
			},
			API_center() {
				let that = this;
				that.$api.fengXing.center({
					user_id: that.user_id,
				}).then((res) => {
					console.log('----', res);
					if (res.code == 0) {
						that.centerData = res.data
					} else {
						this.$message(res.msg);
					}
				});
			},
			API_orderlist() {
				let that = this;
				that.$api.fengXing.orderlist({
					user_id: that.user_id,
					page: that.page,
					limit: 4,
				}).then((res) => {
					if (res.code == 0) {
						that.orderlist = res.data.list;
						that.total_page = res.data.total_page;
					} else {}
				});
			},
			p1() {
				let that = this;
				that.orderlist = [];
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				that.$api.fengXing.orderlist({
					user_id: that.user_id,
					page: that.page - 1,
					limit: 4,
				}).then((res) => {
					if (res.code == 0) {
						that.orderlist = res.data.list;
						that.page = that.page - 1;
						loading.close();
					} else {}
				});
			},
			p2() {
				let that = this;
				that.orderlist = [];
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				that.$api.fengXing.orderlist({
					user_id: that.user_id,
					page: that.page + 1,
					limit: 4,
				}).then((res) => {
					if (res.code == 0) {
						that.orderlist = res.data.list;
						that.page = that.page + 1;
						loading.close();
					} else {}
				});
			},
			order() {
				var that = this;
				that.dialogFormVisible = true;
			},
			login() {
				if (!this.is_login) {
					this.$router.push('/login');
				} else {
					this.$confirm('此操作将确认退出登录, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message({
							type: 'success',
							message: '退出成功!'
						});
						localStorage.clear();
						this.$router.push('/');
					}).catch(() => {});

				}

			},
		}
	};
</script>
<style>
	#eldlog .el-dialog {
		width: 80% !important;
	}

	.el-descriptions-item__label,
	.is-bordered-label {
		font-weight: bold !important;
		color: #333 !important;
	}
</style>
<style scoped lang="scss">
	.linepage {
		// width: 50%;
		margin: auto;
		overflow: hidden;
		display: flex;
		justify-content: center;

		.p1,
		.p2 {
			padding: 0 20px;
		}

		.p1:active,
		.p2:active {
			color: #26a4de;
		}
	}

	.tgkf {
		width: 100%;
		color: #46a7ed;
		line-height: 1.5;
	}

	.is-bordered-label {
		color: #333 !important;
		font-weight: bold !important;
	}

	.el-descriptions-item__label {
		color: #333 !important;
		font-weight: bold !important;
	}

	.el-descriptions-item__label.is-bordered-label {
		color: #333 !important;
		font-weight: bold !important;
	}

	.lines {
		width: 100%;
		height: 16px;
	}

	// .el-descriptions-row {
	// 	th {
	// 		color: #333 !important;
	// 	}
	// }

	// .el-descriptions-item__cell,
	// .el-descriptions-item__label,
	// .is-bordered-label {
	// 	color: #333 !important;
	// }

	/* el-table 宽度自适应 */
	.elTable {
		width: 100%;
	}

	.elTable /deep/ .el-table__header-wrapper table,
	.elTable /deep/ .el-table__body-wrapper table {
		width: 100% !important;
	}

	.elTable /deep/ .el-table__body,
	.elTable /deep/ .el-table__footer,
	.elTable /deep/ .el-table__header {
		table-layout: auto;
	}

	.elTable /deep/ .el-table__empty-block,
	.elTable /deep/ .el-table__body {
		width: 100% !important;
	}

	.el-row {
		display: flex;
		flex-wrap: wrap;
		position: relative;
		box-sizing: border-box;
	}

	.is-justify-center {
		justify-content: center;
	}

	.vip {
		min-height: 100vh;
		background: linear-gradient(101deg, #01132c 0%, #194581 100%);
		padding-top: 0.80645161rem;

		.table {
			background-color: #fff;

			.table-hd {
				display: flex;

				.t-hd-th {
					flex: 1;
					text-align: left;
					font-weight: 700;
					font-size: .24193548rem;
					line-height: .48387097rem
				}
			}

			.table-con {
				display: flex;

				.blueColor {
					color: #2878ff;
					cursor: pointer
				}
			}

			.t-hd-td {
				display: flex;
				align-items: center;
				justify-content: left;
				flex: 1;
				border: 1px solid #ccc;
				font-size: .18rem;
				line-height: .48387097rem;
				padding: .08064516rem
			}

		}

		.hd {
			position: relative;
			max-width: 13.39516129rem;
			height: 0.80645161rem;
			margin: auto;
			font-size: 0.56451613rem;
			font-family: FZLanTingHeiS-EB-GB;
			font-weight: 700;
			color: #46a7ed;
			line-height: 0.80645161rem;
			background: url(../../../assets/images/fengXing/topBtnBG.png) repeat center / cover;
			text-align: center;
			z-index: 1900;

			.btn {
				display: inline-block;
				width: 1.61290323rem;
				height: 0.48387097rem;
				line-height: 0.48387097rem;
				font-size: 0.24193548rem;
				font-family: PingFang SC;
				margin: auto 0.24193548rem;
				background: linear-gradient(101deg, #01132c 0%, #194581 100%);
				cursor: pointer;
			}

			.sw {
				color: #fff;
				font-size: 0.33064516rem;
			}

			.back {
				position: absolute;
				left: 0.64516129rem;
				top: -0.04032258rem;
				height: 0.24193548rem;
				font-size: 0.24193548rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #46a7ed;
				line-height: 0.24193548rem;
				cursor: pointer;
				padding: 0.16129032rem;
			}

			.his {
				display: flex;
				justify-content: center;
				align-self: center;
				position: absolute;
				right: 0.16129032rem;
				top: -0.04032258rem;
				height: 0.24193548rem;
				font-size: 0.24193548rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #46a7ed;
				line-height: 0.24193548rem;
				cursor: pointer;
				padding: 0.16129032rem;

				.huomiao {
					width: 0.24193548rem;
					height: 0.24193548rem;
				}
			}
		}

		.box {
			margin: auto 0.24193548rem;
			background: rgba(1, 39, 73, 0.49);
			box-shadow: 0 1px 21px #2a96e973;
			margin: auto;
			text-align: center;

			.con {
				cursor: pointer;

				.des {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 2.07258065rem;
					height: 2.07258065rem;
					// background: url(/assets/icon.png) no-repeat center / cover;
					margin: auto;
					font-size: 0.34677419rem;
					font-family: FZLanTingHeiS-EB-GB;
					font-weight: 700;
					color: #fff;
					text-align: center;
				}

				.buy {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0.34677419rem auto 0.52419355rem;
					width: 2.70967742rem;
					height: 0.92741935rem;
					background: url() no-repeat center / cover;
					font-size: 0.34677419rem;
					font-family: PingFang SC;
					font-weight: 700;
					color: #26a4de;
				}
			}
		}

		.inpBox {
			width: 8.06451613rem;
			margin: 0.56451613rem auto 0.24193548rem;

			.inpDes {
				font-size: 0.25806452rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
				line-height: 0.25806452rem;
				margin-left: 0.25806452rem;
			}

			.inp {
				display: flex;
				align-items: center;
				width: 100%;
				height: 1.40322581rem;
				margin-top: 0.18548387rem;
				background: url() no-repeat center / cover;

				input {
					display: block;
					border: none;
					outline: none;
					height: 100%;
					flex: 1;
					background-color: transparent;
					font-size: 0.25806452rem;
					font-family: FZLanTingHeiS-EB-GB;
					font-weight: 700;
					color: #fff;
					text-indent: 2em;
				}

				.act {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 1.98387097rem;
					height: 0.86290323rem;
					border: 1px solid #2f66a1;
					border-radius: 0.0483871rem;
					font-size: 0.25806452rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: #fff;
					text-align: center;
					background-color: #0c3059;
					cursor: pointer;
				}

				.w100 {
					width: 1.4516129rem;
					margin: auto 0.16129032rem;
				}
			}

			.tip {
				font-size: 0.2016129rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #46a7ed;
				margin: 0.16129032rem 0 0 0.25806452rem;
			}

			.pwd {
				color: #fff;
				padding-left: 1em;
				flex: 1;
				word-break: break-all;
			}

			.phone {
				color: #fff;
				padding-left: 1em;
				flex: 1;
				word-break: break-all;
			}

			.gongshi {
				text-align: center;
			}
		}

		.back {
			position: fixed;
			left: 0.24193548rem;
			top: 0.16129032rem;
			width: 1.61290323rem;
			height: 0.64516129rem;
			color: #fff;
			line-height: 0.64516129rem;
			text-align: center;
			font-size: 0.24193548rem;
			z-index: 9999;
		}

		.btnlogin {
			margin: 0.80645161rem auto 0;
			width: 4.83870968rem;
			height: 0.96774194rem;
			color: #fff;
			line-height: 0.96774194rem;
			font-size: 0.32258065rem;
		}

		.btn {
			border: 1px solid rgba(32, 254, 255, 0.3);
			position: relative;
			text-align: center;
			overflow: hidden;
			cursor: pointer;

			i {
				position: absolute;
				display: inline-block;
				height: 1px;
				width: 100%;
			}

			.bottom {
				bottom: 0;
				left: -100%;
				background-image: linear-gradient(270deg, transparent, #03e9f4, transparent);
				animation: one 4s linear 1s infinite;
			}

			.top {
				top: 0;
				right: -100%;
				background-image: linear-gradient(270deg, transparent, #03e9f4, transparent);
				animation: three 4s linear 3s infinite;
			}
		}

		.btn:before {
			content: ' ';
			position: absolute;
			width: 1px;
			height: 100%;
			top: -100%;
			left: 0;
			background-image: linear-gradient(0deg, transparent, #03e9f4, transparent);
			animation: two 4s linear infinite;
		}

		.btn:after {
			content: ' ';
			position: absolute;
			width: 1px;
			height: 100%;
			bottom: -100%;
			right: 0;
			background-image: linear-gradient(360deg, transparent, #03e9f4, transparent);
			animation: four 4s linear 2s infinite;
		}

		.tip {
			color: #fff;
			width: 8.06451613rem;
			margin: 0.80645161rem auto;
			color: #26a4de;
			cursor: pointer;
		}

		.person {
			max-width: 1200px;
			margin: auto;

			.title {
				padding-top: 0.32258065rem;

				.txt {
					height: 0.32258065rem;
					font-size: 0.32258065rem;
					font-family: FZLanTingHeiS-EB-GB;
					font-weight: 700;
					color: #46a7ed;
					text-align: center;
					letter-spacing: 6px;

					.t2 {
						color: #fff;
					}
				}

				.pic {
					display: block;
					height: 0.18548387rem;
					width: 8.12096774rem;
					margin: 0.12096774rem auto 0;
				}
			}

			.info {
				margin: 0.24193548rem auto 0.80645161rem;
				padding: 0.24193548rem;
				color: #fff;
				text-align: left;
				height: 2.41935484rem;
				font-size: 0.24193548rem;

				.txt {
					display: flex;
					padding: 0.16129032rem;

					.label {
						width: 1.61290323rem;
					}

					.val {
						flex: 1;
						padding-left: 0.24193548rem;
					}
				}

				.pic2 {
					display: flex;
					justify-content: center;
					align-items: center;
					padding-top: 0.08064516rem;

					img {
						width: 1.61290323rem;
						height: 1.61290323rem;
					}
				}
			}
		}

		.contract {
			display: block;
			margin: 0.04032258rem;
			color: #46a7ed !important;
			cursor: pointer;
		}

		.table {
			background-color: #fff;

			.table-hd {
				display: flex;

				.t-hd-th {
					flex: 1;
					text-align: left;
					font-weight: 700;
					font-size: 0.24193548rem;
					line-height: 0.48387097rem;
				}
			}

			.table-con {
				display: flex;

				.t-hd-td {
					display: flex;
					align-items: center;
					justify-content: left;
					flex: 1;
					border: 1px solid #ccc;
					font-size: 0.24193548rem;
					line-height: 0.48387097rem;
					padding: 0.08064516rem;
				}

				.blueColor {
					color: #2878ff;
					cursor: pointer;
				}
			}
		}
	}

	@keyframes one {
		0% {
			left: -100%;
		}

		50%,
		to {
			left: 100%;
		}
	}

	@keyframes two {
		0% {
			top: -100%;
		}

		50%,
		to {
			top: 100%;
		}
	}

	@keyframes three {
		0% {
			right: -100%;
		}

		50%,
		to {
			right: 100%;
		}
	}

	@keyframes four {
		0% {
			bottom: -100%;
		}

		50%,
		to {
			bottom: 100%;
		}
	}
</style>